<template>
  <!-- 编辑弹出框 -->
  <el-dialog :title="dialogTitle" :visible.sync="dialogVisible" width="90%" top="5vh">
    <el-form ref="dataForm" :model="dataForm" label-width="80px">
      <el-row>
        <el-col :span="6">
          <el-form-item label="ID"><el-input v-model="dataForm.id" disabled></el-input></el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="分类">
            <el-select v-model="dataForm.product_id" placeholder="选择分类">
              <el-option v-for="item in categoryList" :key="item.id" :label="item.title" :value="item.id"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
       <el-col :span="6">
          <el-form-item label="商品编号"><el-input v-model="dataForm.product_id" /></el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="用户名"><el-input v-model="dataForm.name" /></el-form-item>
        </el-col>
      </el-row>
      <el-row>

        <el-col :span="24">
          <el-form-item label="时间"><el-input v-model="dataForm.date"></el-input></el-form-item>
        </el-col>
       <el-col :span="12">
         <el-form-item label="用户头像">
           <upload-single-image :value.sync="dataForm.avatar"></upload-single-image>
         </el-form-item>
       </el-col>
			 <el-col :span="12">
			   <el-form-item label="图片">
			     <upload-single-image :value.sync="dataForm.pic"></upload-single-image>
			   </el-form-item>
			 </el-col>
        <!-- <el-form-item label="评价">
          使用富文本组件
          <editor :content.sync="dataForm.detail" style="height: 300px;"></editor>
        </el-form-item> -->
      </el-row>
    </el-form>
    <!-- 底部按钮 -->
    <span slot="footer" class="dialog-footer">
      <el-button size="medium" @click="dialogVisible = false">取消</el-button>
      <el-button type="primary" @click="handleSubmit">确定</el-button>
    </span>
  </el-dialog>
</template>

<script>
import * as ForumAPI from '@/api/forum.js';
import Editor from '@/components/Tinymce/index.vue'; //导入封装后的富文本组件
  import UploadSingleImage from '@/components/Upload/UploadSingleImage';
import dayjs from 'dayjs';
export default {
  name: 'ForumReview',
  components: {
    editor: Editor ,//注册富文本组件
    UploadSingleImage,
  },
  props: {
    category_id: {
      type: Number,
      default: 0
    },
    categoryList: Array //分类选项数据
  },
  data() {
    return {
      dialogVisible: false,
      dataForm: {
        id: 0
      },
      //数据校验规则，后续继续完善
      rules: {}
    };
  },
  computed: {
    //弹框标题
    dialogTitle() {
      return !this.dataForm.id ? '新增' : '编辑';
    }
  },

  methods: {
    //加上BaseAPI生成图片完整Url
    fullUrl(img) {
      return `${this.BaseAPI}${img}`;
    },
    init(id) {
      this.dataForm.id = id || 0;
      this.dialogVisible = true;
      this.$nextTick(() => {
        this.$refs.dataForm.resetFields();
        if (id) {
          //是编辑
         ForumAPI.getDetailById(id).then(result => {
            this.dataForm = result.data; //看接口文档，知道data是对应的商品对象
            this.dataForm.date = dayjs(this.dataForm.date).format('YYYY-MM-DD');
            delete this.dataForm.picList; //删除多余字段；为什么？看API接口
            delete this.dataForm.family; //删除多余字段；为什么？看API接口
          });
        } else {
          //是新增
          this.setDataFormToDefault(); //Props传递的参数
        }
      });
    },

    // 确认提交
    handleSubmit() {
      this.$refs['dataForm'].validate(valid => {
        if (valid) {
         ForumAPI.updateReview(this.dataForm)
            .then(() => {
              this.$message.success(`保存成功`);
              this.dialogVisible = false;
              this.$emit('refreshDataList'); //重新刷新列表数据
            })
            .catch(error => {});
        }
      });
    },

    setDataFormToDefault() {
      //初始默认值
      let defaultForm = {};
      defaultForm.id = 0;
      defaultForm.product_id = this.category_id; //Props传递的参数
      defaultForm.detail = '';
      defaultForm.date = '';
      defaultForm.name = '';
      defaultForm.avatar = '';
      defaultForm.pic = '';
      this.dataForm = Object.assign({}, defaultForm);
    }
  }
};
</script>

<style scoped></style>
